/**
 * 返回的参数为 pushModel, modelData
 * @function 1.用来引入GLTF模型文件创建模型
 * @returns { Object }
 */
// 导入Vue组合API
import { shallowReactive } from 'vue'
// 引入Three.js
import * as THREE from 'three'
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// HTML标签相关代码
import { tag } from './tag.js'
import { createFlame } from './fire'// 火焰序帧动画
const contentModel = shallowReactive({
  // 声明场景对象
  model: {},
  // 声明GLTF加载器
  loader: {},
  // 获取能交互的模型集合
  granaryArr: [],
  // 是否加载成功
  loadingState: false
})
/**
 * 添加模型的方法
 */
// const { model, loader } = content
contentModel.model = new THREE.Group()// 声明一个组对象，用来添加加载成功的三维场景
contentModel.loader = new GLTFLoader() // 创建一个GLTF加载器
const fire = contentModel.loader.loadAsync('https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/threeJS/model.glb', (gltf) => { // gltf加载成功后返回一个对象
}).then((gltf) => {
  // 递归遍历gltf.scene，批量更改所有Mesh的材质
  gltf.scene.traverse(object => {
    if (object.type === 'Mesh') {
      // MeshLambertMaterial：受光照影响   MeshBasicMaterial：不受光照影响
      object.material = new THREE.MeshLambertMaterial({
        map: object.material.map, // 获取原来材质的颜色贴图属性值
        color: object.material.color // 读取原来材质的颜色
        // side: THREE.DoubleSide,//围墙需要设置双面显示
      })
    }
    // 加载成功状态位
    contentModel.loadingState = true
  })
  // 查询粮仓下的3D模型
  const group = gltf.scene.getObjectByName('粮仓')
  // 储存可交互模型的name
  const meshName = []
  // 递归粮仓所属的
  group.traverse(obj => {
    // 获取可交互模型的name
    if (obj.type === 'Mesh') {
      meshName.push(obj.name)
    }
    if (obj.type === 'Mesh') {
      // 添加能交互的
      contentModel.granaryArr.push(obj)
      // 把粮仓名称obj.name作为标签
      const label = tag(obj.name)
      // 创建三维向量
      const pos = new THREE.Vector3()
      // 获取obj世界坐标
      obj.getWorldPosition(pos)

      // 粮仓世界坐标对应粮仓底部圆心位置，如果标签像标注在粮仓底部，需要加上粮仓整体高度
      if (obj.parent.name === '立筒仓') {
        pos.y += 36// 加上粮仓顶部高度
      } else if (obj.parent.name === '浅圆仓') {
        pos.y += 20
      } else if (obj.parent.name === '平房仓') {
        pos.y += 17
      }
      label.position.copy(pos)// 标签标注在obj世界坐标
      contentModel.model.add(label)// 标签插入model组对象中
    }
  })
  // 把gltf.scene中的所有模型添加到model组对象中
  contentModel.model.add(gltf.scene)
  // 创建火焰生成类
  class Getfire {
    constructor(name) {
      this.name = name // 储存传递的参数
    }

    // 创建火焰
    granaryFlame () { // name：粮仓名称编号
      const granary = gltf.scene.getObjectByName(this.name)
      const pos = new THREE.Vector3()
      granary.getWorldPosition(pos)// 获取粮仓granary世界坐标设置火焰位置
      const flame = createFlame()// 创建一个火焰序列帧动画对象
      flame.position.copy(pos)
      if (granary.parent.name === '立筒仓') {
        flame.position.y += 36// 加上粮仓顶部高度
      } else if (granary.parent.name === '浅圆仓') {
        flame.position.y += 20
      } else if (granary.parent.name === '平房仓') {
        flame.position.y += 17
      }
      flame.position.y += -4// 适当向下偏移
      // 火焰上方标签
      const messageTag = tag('粮仓 ' + this.name + ' 失火了 ！！！')
      flame.add(messageTag)// id"messageTag"对应的HTML元素作为three.js标签
      messageTag.position.y += 40// 考虑火焰高度 向上适当偏移
      flame.tag = messageTag// 火焰自定义一个属性指向自己的HTML标签
      return flame
    }

    // 添加火焰到场景中去
    getFire (granary) {
      contentModel.model.add(granary)// 火焰模型添加到model中
    }

    // 暂停火焰
    stopFire (granary) {
      granary.stop()
      contentModel.model.remove(granary)
      granary.remove(granary.tag)
    }
  }

  return { Getfire, meshName }
})
// fire.then(e => {
//   e.getFire('Q_05')

//   setTimeout(() => {
//     e.stopFire('Q_05')
//   }, 1000)
// })
export { contentModel, fire }

// loader.load(`${process.env.BASE_URL}model/model.gltf`, (gltf) => { // gltf加载成功后返回一个对象
//   console.log('控制台查看gltf对象结构', gltf)
//   // gltf.scene可以包含网格模型Mesh、光源Light等信息，至于gltf.scene是否包含光源，要看.gltf文件中是否有光源信息
//   console.log('gltf对象场景属性', gltf.scene)
//   // 把gltf.scene中的所有模型添加到model组对象中
//   model.add(gltf.scene)
// })
